var template_= `
<div class="user">
<el-tabs v-model="activeName" >
<!--tab 角色管理-->
      <el-tab-pane label="角色管理" name="juserTab">
      <span slot="label"><i class="iconfont icon-24gl-userGroup2"></i> 角色管理</span>
      <el-table
              :data="juserData"  stripe
              :row-class-name="tableRowClassName">
              style="width: 100%">
        <el-table-column prop="id" label="ID"  width="50"></el-table-column>
        <el-table-column prop="name" label="角色"  width="140" > </el-table-column>
        <el-table-column prop="description" label="说明" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="menu_id" label="权限"  > </el-table-column>
        <el-table-column v-if="juserRoleAll" prop="added" label="【添加】全局"  width="110">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.added"
                       active-value="1"
                       inactive-value="0"
                       @change="changeSwitch('juser',scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column v-if="juserRoleAll" prop="modify" label="【修改】全局" width="110">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.modify"
                       active-value="1"
                       inactive-value="0"
                       @change="changeSwitch('juser',scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column v-if="juserRoleAll" prop="del" label="【删除】全局"  width="110">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.del"
                       active-value="1"
                       inactive-value="0"
                       active-color="#F56C6C"
                       inactive-color="#B9B9B9"
                       @change="changeSwitch('juser',scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot="header" slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="角色添加完成后，才能设置菜单权限" placement="top">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="juserAdd">添加角色</el-button>
            </el-tooltip>
          </template>

          <template slot-scope="scope">
            <el-button  plain circle type="primary"  icon="el-icon-edit" size="small" @click="juserEdit(scope.row)"></el-button>
            <el-button  plain type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row,'juser')"></el-button>
          </template>
        </el-table-column>
      </el-table>
<!--tab 角色管理  edit-->
      <el-dialog :visible.sync="juserVisible" width="70%"   title="">
        <el-form ref="elForm" :model="juserEditData" size="medium" label-width="100px">
          <el-form-item label="角色:" prop="name">
            <el-input v-model="juserEditData.name" placeholder="请输入角色名称" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="说明:" prop="description">
            <el-input v-model="juserEditData.description" placeholder="请输入角色说明描述" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>

          <!--check-strictly="false" 父子不互相关联(勾子时，父不会自动打勾) -->
          <el-form-item label="权限" prop="menu_id">
            <el-checkbox  v-model="isjuserCheckAall" @change="allCheckjuser">全选</el-checkbox>
            <el-tree ref="juserTreeRef" node-key="id" :data="juserTreeData"
                     :default-checked-keys="juserEditData.defaultChecked"
                     default-expand-all
                     :expand-on-click-node="false"
                     show-checkbox
                     highlight-current
                     :check-strictly="checkStrictly"
                     @check="juserTreeCheck">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    {{ data.meta }}
                    <span v-if="data.component!==null && node.checked &&
                    data.meta!='首页' && juserEditData.type=='edit' ">

                      <el-switch  v-if="menuRow.added=='1'?0:1"
                               v-model="data.added"
                               active-value="1"
                               inactive-value="0"
                               @change="changeMenuSwitch($event,node,data,'add')"
                              active-text="新增">
                      </el-switch>
                       <el-switch v-if="menuRow.modify=='1'?0:1"
                               v-model="data.modify"
                               active-value="1"
                               inactive-value="0"
                               @change="changeMenuSwitch($event,node,data,'modify')"
                               active-text="修改">
                      </el-switch>
                       <el-switch v-if="menuRow.del=='1'?0:1"
                               v-model="data.del"
                               active-value="1"
                               inactive-value="0"
                               @change="changeMenuSwitch($event,node,data,'del')"
                               active-color="#F56C6C"
                               inactive-color="#DCDFE6"
                               active-text="删除">
                      </el-switch>
                    </span>
                  </span>
            </el-tree>
          </el-form-item>
        </el-form>
        <div align="right">
          <el-button @click="juserVisible=false">取消</el-button>
          <el-button type="primary" @click="juserEdidSave">确定</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>

<!--tab 用户管理-->
    <el-tab-pane label="用户管理" name="userTab">
    <span slot="label"><i class="el-icon-s-custom"></i> 用户管理</span>
        <el-table @row-click="rowClick" ref="expandTable"
                :data="userData"  stripe
                style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="电话"> <span>{{ props.row.phone }}</span> </el-form-item>
                <el-form-item label="密码"> <span>{{ props.row.password }}</span> </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="index" label="ID" width="50"> </el-table-column>
          <el-table-column prop="ID" label="ID" v-if="false" sortable="custom"  ></el-table-column>
          <el-table-column prop="name" label="用户" > </el-table-column>
          <el-table-column prop="zname" label="角色" >
            <template slot-scope="scope">
              <el-popover trigger="hover"  :content="scope.row.menu_id"
                          placement="top-start" popper-class="el-popover-self">
                <div slot="reference">{{ scope.row.zname }}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="bm" label="部门"></el-table-column>

          <el-table-column prop="status" label="状态 (启用/禁用)" >
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status"
                         active-value="1"
                         inactive-value="0"
                         active-color="#67C23A"
                         inactive-color="#B9B9B9"
                         @change="changeSwitch('user',scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180">
            <template slot-scope="scope">
              <el-button plain circle type="primary"  icon="el-icon-edit" size="small" @click="userEdit(scope.row)"></el-button>
              <el-button plain type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row,'user')"></el-button>
              <el-button plain type="warning" icon="el-icon-unlock" size="mini" @click="changePasswd(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
 <!--tab 用户管理  edit-->
      <el-dialog :visible.sync="userVisible" width="70%"  title="修改">
        <el-form ref="elForm" :model="userEditData" size="medium" label-width="100px">
 
          <el-form-item label="用户" prop="name">
            <el-input v-model="userEditData.name" :disabled="true" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>

          <el-form-item label="角色" prop="juser_id">
            <el-select v-model="userEditData.juser_id" placeholder="角色" >
              <el-option v-for="(item, index) in juserName" :key="index"
                         :label="item.label" :value="item.value" >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="部门" prop="bm">
            <el-input v-model="userEditData.bm"  clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="userEditData.phone"  clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-form>
        <div align="right">
          <el-button @click="userVisible=false">取消</el-button>
          <el-button type="primary" @click="userEdidSave">确定</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
  </el-tabs> 
 
</div>
`
var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'views/user.css'; 
document.head.appendChild(css);

//https://blog.csdn.net/yunchong_zhao/article/details/103792418
var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'css/icon/iconfont.css'; 
document.head.appendChild(css);

export default {
  name: 'user',
  data() {
    return {
      activeName: 'juserTab',  //userTab  juserTab
        //角色
      juserRoleAll:1, //每个角色的所有权限
      checkStrictly:false,   //true 父子不互选 ； false 父子互选
      juserData:[], //table
      juserVisible:false,
      juserEditData: {},
      juserCheckedList:[],
      juserTreeData:[], //tree data
      isjuserCheckAall:'',
      menuRow: {},
      //用户
      userData: [],
      userVisible:false,
      userEditData: {},
      juserName:[],     
    }
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.name === "系统管理员") {
        return 'success-row';
      } else if (rowIndex === 3) {
        return 'warning-row';
      }
      return '';
    },
    getUserAndJuserList(v) {
      axios.post('controller/user.php?lx=getUserAndJuserList', {
        table: 'xx',
      }).then((res) => {
        if (res.data.code == 200) {
          console.log("-----------",res)
          this.userData = res.data.user
          this.juserData = res.data.juser
         // data.data.map(item => item.professional)
          console.log("------------",res.data.juser)

          this.juserName=res.data.juser.map(this.getFuntion)
        }
      });
    },
    getFuntion(item){  //角色 中文名
      return {value:item.id+"",label:item.name}
    },
    getJuserTreeData(){
      axios.post('controller/user.php?lx=getJuserTreeMenu', {
        id:'',
      }).then((res) => {
        console.log("getJuserTreeData---",res)
        this.juserTreeData=res.data.data
      });
    },

//-------角色管理-----
    changeSwitch(t,row){ // 1用户 启用/禁用；  2角色 【添加/修改/删除】权限
      console.log("--changeSwitch",t,row)
      axios.post('controller/user.php?lx=changeStatus&table='+t, row).then((res) => {
        if (res.data.code==200) {
          this.loading=false
          this.pageTotal=res.data.total
          this.tableData=res.data.data
        }
      });
    },
    handleDelete(item,table_){  //1用户  2角色
        console.log(item)
        this.$confirm('是否要确实删除【'+item.name+'】?', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          console.log("dell")
          axios.post('controller/user.php?lx=del', {
            table:table_,
            id: item.id,
          }).then((res) => {
            this.$message({
              message: res.data.message,
              type: 'success',
            });
            this.getUserAndJuserList()
          });
        }).catch(()=>{});
    },
    juserTreeCheck(data, checked, indeterminate){ //tree 获取check的id
      // check-strictly="true" 父子不互相关联
      //this.juserCheckedList=checked.checkedKeys
      // console.log("juserCheckedList--",this.juserCheckedList)
    },
    allCheckjuser(){
        if (this.isjuserCheckAall) {
          this.$refs.juserTreeRef.setCheckedNodes(this.juserTreeData);
        } else {
          this.$refs.juserTreeRef.setCheckedKeys([])  //清空选择
        }
    },
    juserAdd(){
      this.getJuserTreeData()
      this.juserVisible=true
      this.juserEditData= {}
      this.juserEditData.type='add'
      this.$nextTick(() => {
        this.$refs.juserTreeRef.setCheckedKeys([])  //清空选择
      });
    },
    juserEdit(row){
      console.log("==row==",row)
      this.menuRow=row
      console.log("==add==",this.menuRow.added)
      //console.log("--juserTreeData--",this.juserTreeData)

      axios.post('controller/user.php?lx=getJuserMenuAddDel',{
        id:row.id,

      }).then((res) => {
        console.log("---->:",res)
        this.juserTreeData=res.data.data

        this.juserVisible=true
        this.checkStrictly=true  //true 父子不互选。(这样才能保证有些子项没有选择的，就不勾选)
        this.$nextTick(() => {
          this.$refs.juserTreeRef.setCheckedKeys([])  //清空选择

          this.juserEditData={...row}
          this.juserEditData.defaultChecked=row.menu_id.split(',') //选中
          this.juserEditData.type='edit'
          this.checkStrictly=false  //赋值完成后设置为false  恢复互选
        });
      });
    },
    juserEdidSave(){
      //https://blog.csdn.net/Irene1991/article/details/114969502
      //check-strictly="false" 严格的遵循父子互相关联
      var parentIds = this.$refs.juserTreeRef.getHalfCheckedKeys()
      var childsIds = this.$refs.juserTreeRef.getCheckedKeys()
      this.juserCheckedList = Array.from(new Set(parentIds.concat(childsIds)))

      console.log("juserCheckedList--",this.juserCheckedList)
      console.log("juserEditData--",this.juserEditData)
      axios.post('controller/user.php?lx=juserEditSave&type='+this.juserEditData.type,{
           id:this.juserEditData.id,
           name:this.juserEditData.name,
           description:this.juserEditData.description,
           value:this.juserCheckedList.toString(),
          // type:this.juserEditData.type
      }).then((res) => {
          console.log("juserEditSave:",res)
          this.$message({
            message: res.data.message,
            type: res.data.code=='200'?'success':'error'
          });
          this.juserVisible=false
          this.getUserAndJuserList()
      });
    },
    changeMenuSwitch(v,node,data,type_){//修改 角色 菜单权限

      console.log("---v----",v)
      console.log("---node----",node)
      console.log("---data----",data)
      console.log("---type_----",type_)

      axios.post('controller/user.php?lx=changeMenuSwitch',{
        id:data.id+"",
        juserID:this.juserEditData.id+"",
        type:type_,
        check:v,
      }).then((res) => {
        if (res.data.code==200) {

          this.$message({
            message: res.data.message,
            type: res.data.code=='200'?'success':'error'
          });
        }
      });
    },

//--------用户管理--------------
    rowClick(row, column, event){
      if(column.label=="用户")
        this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
    },
    userEdit(row){
        this.userVisible=true
        this.userEditData={...row}
        console.log(this.userEditData)
    },
    userEdidSave(){
        console.log(this.userEditData)
        axios.post('controller/user.php?lx=userEditSave',
                this.userEditData
        ).then((res) => {
          console.log("userEditSave:",res)
          this.$message({
            message: res.data.message,
            type: res.data.code=='200'?'success':'danger'
          });
          this.userVisible=false
          this.getUserAndJuserList()
        });
    },
    changePasswd(item){
      this.$prompt('请输入新密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        axios.post('controller/user.php?lx=changePassword', {
          id: item.id,
          password:value,
        }).then((res) => {
          this.$message({
            message: res.data.message,
            type: 'success',
          });
        });
      }).catch(() => { });

    },
  },
  created(){},
  mounted(){
    this.getUserAndJuserList()
    //this.getJuserTreeData()   //现在 添加角色时！
    // (提前为 角色管理 的 添加/修改 权限 准备menu数据)
  }, 
  template:template_,
}

